<template>
	<view class="currentPage">
		<view class="header">PENTA KILL</view>
		<view class="" style="position: relative;top: 200rpx;">
			<input type="text" value="" class="account" v-model="user" :placeholder="placeholder1" maxlength="25"
				@focus="()=>{placeholder1=''}" @blur="()=>{placeholder1='用户名/邮箱'}" />
			<input type="password" value="" class="password" v-model="password" :placeholder="placeholder2"
				maxlength="16" @focus="()=>{placeholder2=''}" @blur="()=>{placeholder2='输入密码'}" />
		</view>
		<view class="login-btn-wrapper" v-if="user != '' && password != ''" @tap='login'>
			<image src="../../static/icon/login/login_arrow.png" mode=""></image>
			<view class="login-btn can_login">
			</view>
		</view>
		<view class="login-btn-wrapper" v-else style="background: rgba(240,240,240,1)">
			<image src="../../static/icon/login/login_arrow.png" mode=""></image>
		</view>
		<view class="user-op">
			<text @tap='toRegister'>新用户注册</text><text>|</text><text @tap='toForgetPass'>忘记密码</text>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import md5 from "../../js/md5.js";
	export default {
		data() {
			return {
				placeholder1: "用户名/邮箱",
				placeholder2: "输入密码",
				user: "1358503971",
				// user: "",
				password: "1234567890",
				// password: ""
			};
		},
		onLoad: function(e) {

			this.$nextTick(function() {
				if (e.relogin) {
					this.$refs.uToast.show({
						title: '登录过期，请重新登录',
						type: 'error',
						position: "top",
						duration: 1500
					})
				}
				if (e.exit) {
					this.$refs.uToast.show({
						title: '已退出',
						type: 'success',
						position: "top",
						duration: 1500
					})
				}
				this.user = uni.getStorageSync('user')
				this.password = uni.getStorageSync('password')

			})



		},
		mounted() {
			let _this = this
			uni.$on('registerLogin', res => {
				console.log(res)
				let a = JSON.parse(res)
				this.user = a.user
				// console.log(data)
				// console.log(data.user)
				// console.log(_this)
				// _this.user = data.user
				// _this.password = data.password
			})
		},
		methods: {
			toForgetPass() {
				uni.navigateTo({
					url: '../forgetPass/forgetPass',
					fail: function(err) {
						console.log(err)
					}
				})
			},
			toRegister() {
				uni.navigateTo({
					url: '../register/register',
					fail: function(err) {
						console.log(err)
					}
				})
			},

			login() {
				uni.showLoading({
					title: '登录中',
				})

				this.$api.login({
					username: this.user + '@qq.com',
					// password: md5.hex_md5(this.password)
					password:this.password
				}).then(res => {
					console.log(res)
					uni.hideLoading()

					if (res.data.code === 1) {
						uni.setStorage({
							key: 'token',
							data: res.data.token,
							success: () => {
								console.log('token写入成功');
								//获取当前用户id
								this.$api.getCurrentAccountInfo().then(res => {
									console.log('当前用户信息', res)
									uni.setStorage({
										key: 'userInfo',
										data: JSON.stringify(res.data.user_info),
										success: () => {
											console.log('用户信息写入成功')
											// uni.$emit('userInfoOk',res.data.user_info)
											this.$refs.uToast.show({
												title: '已登录',
												type: 'success',
												position: "top",
												duration: 500
											})
											setTimeout(() => {
												uni.redirectTo({
													url: `/pages/index/index?userInfo=${JSON.stringify(res.data.user_info)}`,
												})
											}, 500)
										}
									})
									uni.setStorage({
										key: 'id',
										data: res.data.user_info._id,
										success: () => {
											//链接聊天服务器
											this.socket.emit('CONNECT', {
												userId: res.data.user_info._id
											})
										}
									})
								})
							},
							fail: function(err) {
								console.log('token写入失败', err);
							}
						});
					} else {
						this.$refs.uToast.show({
							title: res.data.msg,
							type: 'error',
							position: "top"
						})
					}
				})

			}
		}
	}
</script>

<style lang="scss" scoped>
	.currentPage {
		height: 100vh;
		overflow: hidden;
		background: linear-gradient(to right, #a1c4fd 0%, #c2e9fb 100%);
	}

	.header {
		text-align: center;
		font-size: 60rpx;
		margin-top: 200rpx;
	}

	.account,
	.password {
		text-align: center;
		padding: 24rpx;
		// border: 1px solid;
		font-size: 32rpx;
		margin: 40rpx 100rpx;
		border-radius: 40rpx;
		background-color: rgba(245, 245, 245, .9);
	}

	// .login-btn {
	// 	width: 125rpx;
	// 	height: 125rpx;
	// 	border-radius: 50%;
	// 	// border: 1px solid;
	// 	margin: 150rpx auto;

	// 	display: flex;
	// 	align-items: center;

	// 	image {
	// 		width: 60rpx;
	// 		height: 50rpx;
	// 		// border: 1px solid;
	// 		margin: auto;

	// 	}
	// }

	.login-btn-wrapper {
		width: 125rpx;
		height: 125rpx;
		border-radius: 50%;
		// border: 1px solid;
		margin: 0 auto;
		display: flex;
		align-items: center;
		position: relative;
		overflow: hidden;
		top: 350rpx;

		image {
			width: 60rpx;
			height: 50rpx;
			margin: auto;
		}

		.login-btn {
			width: 500rpx;
			height: 500rpx;
			border: 1px solid;
			position: absolute;
			z-index: -1;
			left: -200rpx;
			top: -300rpx;
		}
	}

	.can_login {
		background-image: linear-gradient(45deg, #41d8dd, #5484eb);
		animation: dh 10s linear infinite;
	}

	@keyframes dh {

		0% {
			left: -200rpx;

		}

		25% {
			left: -300rpx;
			top: -100rpx;

		}

		50% {
			left: 0;
		}

		100% {
			left: -200rpx;

		}


	}

	.user-op {
		display: flex;
		justify-content: space-evenly;
		position: fixed;
		bottom: 50rpx;
		left: 0;
		right: 0;
		// margin-top: 450rpx;

	}
</style>
